<template>
  <div class="mv-id-wrapper">
    <div class="mv-content">
      <div class="left">
        <div class="title">
          <span class="mv-border">MV</span>
          <span class="name">
            {{MVIdData.name}}
            <i v-for="ar in MVIdData.artists" :key="ar.id">{{ar.name}}</i>
          </span>
        </div>
        <div class="player">
          <div
            id="J_prismPlayer"
            class="prism-player"
            ref="aliplayer"
            style="margin: 0 auto"
          ></div>
        </div>
        <div class="comment">
          <div class="comment-label">
            最新评论：
            <span>({{commentData.length}})</span>
          </div>
          <div class="comment-body">
            <ul>
              <li v-for="data in commentData" :key="data.commentId">
                <div class="text-left">
                  <img :src="data.user.avatarUrl" alt />
                </div>
                <div class="text-right">
                  <div class="text-right-title">{{data.user.nickname}}</div>
                  <div class="time">
                    <span class="content">{{data.content}}</span>
                    <div class="sugar">
                      <span class="sugar-time">{{data.time | initDate}}</span>
                      <span class="count">
                        <i class="el-icon-sugar"></i>
                        {{data.likedCount}}
                      </span>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="label">
          <div class="title">
            <span>MV介绍</span>
          </div>
          <div class="time">
            <span>发布时间：{{MVIdData.publishTime}}</span>
            <span>播放次数：{{MVIdData.playCount | setWNum}}次</span>
          </div>
          <div class="desc" v-if="MVIdData.desc">简介：{{MVIdData.desc}}</div>
        </div>
        <div class="about">
          <div class="about-label">相关推荐</div>
          <div class="about-body">
            <ul class="item">
              <li
                class="list"
                v-for="data in aboutData"
                :key="data.id"                
              >
                <div class="list-left" @click="gotoThisPage(data.id)">
                  <img :src="data.cover" alt />
                  <span>
                    <i class="el-icon-video-camera"></i>
                    {{data.duration | setWNumber}}
                  </span>
                </div>
                <div class="list-right">
                  <p>{{data.name}}</p>
                  <p>{{data.desc}}</p>
                  <p>{{data.briefDesc}}</p>
                  <div class="ar">
                    <div v-for="ar in data.artists" :key="ar.id">
                      <span>{{ar.name}}</span>
                      <span v-for="art in ar.alias" :key="art">{{art.name}}</span>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { musicApi } from "@/public/uri.js";
export default {
  name: "mv_id",
  data() {
    return {
      MVIdData: {},
      commentData: [],
      aboutData: []
    };
  },
  mounted() {
    const id = this.$route.params.id;
    this.getMVIdData(id);
  },
  filters: {
    initDate(time) {
      return new Date(time).toLocaleString("chinese", { hour12: false });
    },
    setWNumber(number) {
      return number / 10000 + "万";
    }
  },
  watch: {
    $route(to, form) {
      this.MVIdData = {};
      this.commentData = [];
      this.aboutData = [];
      if (this.player) {
        this.player.dispose();
      }

      this.getMVIdData(to.params.id);
    },
    MVIdData() {
      if (this.MVIdData.brs) {
        const brsNum240 = "240";
        const brsNum480 = "480";
        const brsNum720 = "720";
        const brsNum1080 = "1080";

        let url240 = this.MVIdData.brs[brsNum240];
        let url480 = this.MVIdData.brs[brsNum480];
        let url720 = this.MVIdData.brs[brsNum720];
        let url1080 = this.MVIdData.brs[brsNum1080];
        // 初始化播放器
        this.player = new Aliplayer(
          {
            id: "J_prismPlayer", // 容器id
            //   source:'{"HD":"http://common.qupai.me/player/qupai.mp4","SD":"http://common.qupai.me/player/qupai.mp4"}'
            source: `{"SD": "${url720}", "HD": "${url1080}","LD": "${url480}", "FD": "${url240}" }`, // 视频url
            width: "100%", // 播放器宽度
            height: "430px", // 播放器高度
            loadDataTimeout: "10" // 播放器的缓冲时间提示
          },
          function(player) {
            console.log("播放器创建了");
          }
        );
      }
    }
  },
  methods: {
    gotoThisPage(id) {
      this.$router.push("/music/mv/" + id);
    },
    getMVIdData(id) {
      this.$axios
        .get(`${musicApi}/mv/detail`, {
          params: {
            mvid: id
          }
        })
        .then(res => {
          if (res.data.code === 200) {
            this.MVIdData = res.data.data;
            this.$axios
              .get(`${musicApi}/comment/mv`, {
                params: {
                  id
                }
              })
              .then(res => {
                if (res.data.code === 200) {
                  this.commentData = res.data.comments;
                }
              })
              .catch(err => {
                console.log("错误信息：" + err);
              });
            this.$axios
              .get(`${musicApi}/simi/mv`, {
                params: {
                  mvid: id
                }
              })
              .then(res => {
                if (res.data.code === 200) {
                  this.aboutData = res.data.mvs;
                }
              })
              .catch(err => {
                console.log("错误信息" + err);
              });
          }
        })
        .catch(err => {
          console.log("错误信息" + err);
        });
    }
  }
};
</script>

<style scoped lang="sass">
@import "@/assets/default.sass"
.mv-id-wrapper
  width: 1280px
  margin: 30px auto
  .mv-content 
    width: 100%
    @include flex(space-between,flex-start)
    .left
      flex: 0 0 60%
      overflow: hidden
      .title
        width: 100%
        height: 40px
        line-height: 40px
        overflow: hidden
        @include flex(flex-start,center)
        .mv-border
          flex: 0 0 40px
          border: 1px solid #eb2001
          padding: 3px 5px
          height: 24px
          @include flex(center,center)
        .name
          flex: 1
          margin-left: 10px
          font-size: 21px
          color: #000
          overflow: hidden
          white-space: nowrap
          text-overflow: ellipsis
          >i
            font-size: 14px
            color: #666
      .comment
        width: 100%
        margin-top: 30px
        .comment-label
          width: 100%
          height: 30px
          line-height: 30px
          border-bottom: 1px solid #ccc
          font-size: 18px
          >span
            font-size: 16px
            color: #2eb037
        .comment-body
          width: 100%
          margin: 20px 0
          >ul
            width: 100%
            >li
              width: 100%
              border-bottom: 1px solid #eee
              min-height: 80px
              padding: 10px 0
              @include flex(flex-start,center)
              .text-left
                flex: 0 0 42px
                height: 42px
                border-radius: 50%
                overflow: hidden
                >img
                  width: 100%
                  height: 100%
              .text-right
                padding-left: 20px
                width: 100%
                @include align(center)
                .text-right-title
                  width: 100%                  
                  line-height: 20px               
                  overflow: hidden                  
                .time
                  width: 100%
                  line-height: 20px
                  @include flex(space-between,center)
                  .content
                    flex: 0 0 70%
                  .sugar
                    flex: 1
                    text-align: right
                    .sugar-time
                      color: #999
                      margin-right: 20px
                    .count
                      color: #eb2001
              &:last-child
                border-bottom: none
    .right
      flex: 1
      width: 100%
      padding-left: 40px
      .label
        width: 100%
        .title
          width: 100%
          height: 40px
          line-height: 40px
          border-bottom: 1px solid #e0e0e0
          >span
            font-size: 21px
        .time
          width: 100%
          height: 40px
          line-height: 40px
          @include flex(space-between,center)
          >span
            color: #999
        .desc
          line-height: 20px
      .about
        width: 100%
        margin-top: 20px
        .about-label
          width: 100%
          height: 40px
          line-height: 40px
          font-size: 21px
          border-bottom: 1px solid #e0e0e0
        .about-body
          width: 100%
          margin-top: 10px
          .item
            width: 100%
            .list
              width: 100%
              height: 120px
              margin-bottom: 20px              
              @include flex(space-between,flex-start)
              .list-left
                cursor: pointer
                flex: 0 0 200px
                height: 100%
                position: relative
                >img
                  width: 100%
                  height: 100%
                >span
                  position: absolute
                  top: 0
                  right: 0    
                  color: #fff
                  width: 100%
                  height: 25px
                  background-color: rgba(0,0,0,.3)   
                  padding-right: 5px 
                  @include flex(flex-end,center)            
              .list-right
                flex: 1
                padding-left: 15px
                overflow: hidden
                >p
                  line-height: 18px
                  margin-bottom: 10px
                  &:first-child
                    overflow: hidden
                    text-overflow: ellipsis
                    white-space: nowrap
                    color: #000
                .ar
                  width: 100%
                  height: 30px
                  @include flex(flex-start,center)              
</style>